import React, {FC, useContext, useEffect} from 'react';
import EChartsReact, {useChart} from "echarts-for-react-fc";
import {JournalStatisticCard} from "@/pages/JournalPage/JournalDetail/JournalStatistic/index";
import * as echarts from "echarts/core";
import {GridComponent, LegendComponent, TitleComponent, TooltipComponent} from "echarts/components";
import {BarChart} from "echarts/charts";
import {CanvasRenderer} from "echarts/renderers";
import {UniversalTransition} from "echarts/features";
import {JournalDetailContext} from "@/pages/JournalPage/JournalDetail/commons/JournalDetailContext";
import {useRequest} from "ahooks";
import * as API from "@/services";
import {Button, Form} from "antd";
import {KfDatePicker, KfDateRangePicker} from 'kf-web-library';
import {FormattedMessage} from "umi";

echarts.use([
  GridComponent,
  TooltipComponent,
  BarChart,
  LegendComponent,
  CanvasRenderer,
  TitleComponent,
  UniversalTransition,
]);


interface TrendStatsProps {
}

const TrendStats: FC<TrendStatsProps> = (props) => {
  const {journalId} = useContext(JournalDetailContext)
  const {chartRef, setChartOption, handleListenChartReady} = useChart();

  const dataReq = useRequest(() => API.queryFrontJournalAccessNum(journalId!), {
    ready: !!journalId,
    refreshDeps: [journalId],
    onSuccess: (data) => {
      const respData = data.data || [];
      const record: API.JournalArticleAccess_Sta | undefined = respData.length > 0 ? respData[0] : undefined;

      const categories = [
        '文章数量',
        '中文HTML下载数量',
        '英文HTML下载数量',
        '中文PDF下载数量',
        '英文PDF下载数量',
        '一体化下载数量',
        '引用数量',
        '被引用数量',
        '一体化访问数量',
      ];
      setChartOption({
        tooltip: {
          trigger: 'axis',
          /*formatter: (params: any) => {
            // params 是一个数组，包含了每个 series 对应的数据项
            if (!params || params.length === 0) return '';
            // 构造提示内容
            let result = '<div>';
            categories.forEach((category, index) => {
              const value = params[0].data[index] || 0; // 获取对应索引的值
              result += `<p>${category}: ${value}</p>`;
            });
            result += '</div>';
            return result;
          }*/
        },
        xAxis: {
          type: 'category',
          data: categories,
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [
              record?.articleNum || 0,
              record?.articleHtmlCnNum || 0,
              record?.articleHtmlEnNum || 0,
              record?.articlePdfCnNum || 0,
              record?.articlePdfEnNum || 0,
              record?.downloadNum || 0,
              record?.citingArticleNum || 0,
              record?.citedReferencesNum || 0,
              record?.accessNum || 0,
            ],
            type: 'bar'
          }
        ]
      });
    }
  })

  return (
    <JournalStatisticCard
      title={<FormattedMessage id="stats.impactFactorTrendStatistics"/>}
      className={"trend-stats-card"}
    >
      <EChartsReact
        style={{
          width: "100%",
          height: "100%",
        }}
        ref={chartRef}
        initOpts={{
          renderer: "canvas",
        }}
        //theme={"dark"}
        autoResize={true}
        //onEvents={events}
        echarts={echarts}
        onChartReady={handleListenChartReady}
      />
    </JournalStatisticCard>
  );
};

export default TrendStats;
